<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>放置示例</title>
    <script type="text/javascript" src="./../../../static/js/include/_include-css.js"></script>

    <style>
        .left-panel {
            height: 100vh;
            overflow-y: hidden;
            background-color: #ffffff;
            width: 300px;
            float: left;
        }

        .form-panel-heading {
            padding: 10px;
            font-weight: bold;
            border-bottom: 1px solid #ddd;
            height: 40px;
        }

        .form-panel-body {
            height: calc(100vh - 42px);
            overflow: auto;
            padding: 10px;
        }

        .right-panel {
            border-left: 1px solid #ddd;
            height: 100vh;
            overflow-x: hidden;
            background-color: #ffffff;
            overflow: hidden;
        }

        .form-element-list {
            list-style: none;
            padding: 0;
            margin-right: -10px;
        }

        .form-element-list li {
            float: left;
            width: 50%;
            padding-right: 15px;
        }

        .form-element {
            border: 1px solid #ddd;
            text-align: center;
            background-color: #ffffff;
            padding: 5px;
            user-select: none;
            cursor: move;
            border-radius: 4px;
            margin-bottom: 15px;
        }

        .form-element:hover {
            background-color: rgba(45, 140, 240, 0.1);
        }

        .form-box {
            border: 1px dashed #ddd;
            padding: 15px;
        }

        #form_list {
            list-style: none;
            padding: 0;
            min-height: 200px;
        }

        .ui-state-highlight {
            background-color: #2d8cf0;
            margin-bottom:15px !important;
        }
    </style>
</head>

<body style="overflow: hidden;">
    <div class="left-panel">

        <div class="form-panel-heading">表单元素</div>
        <div class="form-panel-body">
            <ul id="form_element_list" class="form-element-list">
                <li>
                    <div class="form-element" data-code="text">文本组件</div>
                </li>
                <li>
                    <div class="form-element" data-code="radio">单选组件</div>
                </li>
                <li>
                    <div class="form-element" data-code="checkbox">多选组件</div>
                </li>
                <li>
                    <div class="form-element" data-code="select">下拉组件</div>
                </li>
                <li>
                    <div class="form-element" data-code="textarea">多行文本</div>
                </li>
            </ul>
        </div>
    </div>
    </div>
    <div class="right-panel">
        <div class="form-panel-heading">表单元素</div>

        <div class="form-panel-body">
            <div class="alert alert-primary">拖动表单元素到面板中，动态构建表单内容。 </div>
            <div class="form-box">
                <form id="form_list" class="form-horizontal">
                </form>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="./../../../static/js/include/_include-js.js"></script>
    <script type="text/javascript">

        $(function () {


            $(".form-element").draggable({
                appendTo: "#form_list",
                stack: '.form-element',
                connectToSortable: '#form_list',
                helper: function (event) {
                    return $('<div>' + $(event.target).text() + '</div>');
                },
                stop: function (event, ui) {
                    var code = $(event.target).data('code');
                    var html = '';
                    if (code == 'text') {
                        html = '<div class="form-group"><label class="col-sm-2 control-label">文本组件：</label><div class="col-sm-9"><input type="text" class="form-control" placeholder="请输入内容"></div></div>'
                    } else if (code == 'checkbox') {
                        html = '<div class="form-group"><label class="col-sm-2 control-label">多选组件：</label><div class="col-sm-9"><div class="checkbox-inline"><label><input type="checkbox" value="">选项一</label></div><div class="checkbox-inline"><label><input type="checkbox" value="">选项二</label></div></div></div>'
                    } else if (code == 'radio') {
                        html = '<div class="form-group"><label class="col-sm-2 control-label">单选组件：</label><div class="col-sm-9"><div class="radio-inline"><label><input type="radio" name="rdo" value="">选项一</label></div><div class="radio-inline"><label><input type="radio" name="rdo"  value="">选项二</label></div></div></div>';
                    } else if (code == 'select') {
                        html = ' <div class="form-group"><label class="col-sm-2 control-label">下拉组件：</label><div class="col-sm-9"><select class="form-control"><option>选项一</option><option>选项二</option></select></div></div>';
                    } else if (code == 'textarea') {
                        html = '<div class="form-group"><label class="col-sm-2 control-label">多行文本：</label><div class="col-sm-9"><textarea class="form-control" rows="3" placeholder="请输入内容"></textarea></div></div>';
                    }
                    ui.helper.prop("outerHTML", html);
                }
            });
            $("#form_list").sortable({
                placeholder: "ui-state-highlight",
            });
        });
    </script>
</body>

</html>